<template>
  <v-chart class="v-chart" ref="chart" :options="options" :autoResize="true"/>
</template>
<script>
import vChart from 'vue-echarts'
import {LineOptMixin, BarOptMixin, PieOptMixin} from './constants.js'
import merge from 'lodash/merge'
const type = (opts, mix) => merge({}, mix, opts)
const mixMap = {
  line: LineOptMixin,
  bar: BarOptMixin,
  pie: PieOptMixin
}
export default {
  components: {vChart},
  data () {
    return {
      chart: null
    }
  },
  computed: {
    options () {
      return type(this.opts, mixMap[this.opts.series && this.opts.series[0].type || 'line'])
    }
  },
  mounted () {
    this.chart = this.$refs['chart'] && this.$refs['chart'].chart
  },
  props: {
    opts: {
      type: Object,
      default () {
        return {}
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .v-chart{
    height: 100%;
    width: 100%;
  }
</style>
